
<template>
  <view>


    <view class=" u-m-b-30 p-4">

      <view
          class="flex justify-between items-center border-1 border-b-solid border-b-gray mb-4 pb-2"
          v-for="item in list"
      >
        <view>
          <view class="text-sm">{{item.title}}</view>
          <view class="text-xs mt-1 text-gray">{{item.create_time}}</view>
        </view>
        <view class="text-right" style="color: red">
          <view>剩余次数：9次</view>
        </view>
      </view>
    </view>
    <!-- 空数据 -->
    <view class="u-flex u-row-center fa-empty top-15" v-if="is_empty">
      <image src="../../static/image/collect.png" mode=""></image>
      <view class="u-tips-color">没有更多的数据了~</view>
    </view>
    <!-- 加载更多 -->
    <view class="u-p-b-30" v-if="list.length">
      <u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'"/>
    </view>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
                :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>

  </view>
</template>

<script>


export default {

  onLoad() {
    this.collectList();
  },
  onShow() {
    if (this.isFirst && !this.vuex_token) {
      uni.$u.route({
        type: 'back'
      });
      return;
    }
    this.isFirst = true;
  },
  data() {
    return {
      isFirst: false,
      status: 'loadmore',
      has_more: false,
      scrollTop: 0,
      is_empty: false,
      page: 1,
      show: false,
      list: [],

    };
  },
  methods: {
    collectList() {
      this.$api.myCarduseloglist({page: this.page}).then(result => {
        this.status = 'loadmore';
        let {code, data: res, msg} = result;
        if (code == 1) {
          this.list = [...this.list, ...res.data];
          this.has_more = res.current_page < res.last_page;
          this.is_empty = !this.list.length;
        }
      });
    },

  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.has_more) {
      this.status = 'loading';
      this.page = this.page + 1;
      this.collectList();
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.item {
  background-color: #ffffff;
  box-shadow: 0px 0px 5px rgb(233, 235, 243);
  border-radius: 10rpx;
  overflow: hidden;
  border: 1px solid #e9ebf3;

  .name {
    font-size: 11px;

    text {
      width: 150rpx;
    }
  }

  .images {
    width: 235rpx;
    height: 230rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .market_price {
    text-decoration: line-through;
    margin-left: 10rpx;
  }
}
</style>

